<template>
  <div class="search-fixed" :class="{show:show}">
    <div class="search-box">
      <div class="left-search">
        <div class="options-btn" @click="typeVisible = !typeVisible">
          <span>{{ searchTypes[activeIndex].text }}</span>
          <img src="~@/assets/dashboard/down-arrow.png" alt="" width="11" height="7" />
        </div>
        <el-input v-model="searchText" placeholder="请输入..."></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" class="right-btn" @click="handleSearch">搜索</el-button>
      <popup-selector
        :active-index="activeIndex"
        :option-list="searchTypes"
        :css-style="'top: 44px; left: 0;'"
        :visible="typeVisible"
        @clickOption="chooseSearchType"
      ></popup-selector>
    </div>
    <el-tooltip effect="dark" content="返回顶部" placement="left" popper-class="headPopper">
      <div class="toTopBtn" @click="toTop"></div>
    </el-tooltip>
  </div>
</template>
<script>
import popupSelector from './popupSelector'
export default {
  components: {
    popupSelector
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      typeVisible: false,
    }
  },
  computed: {
    searchTypes: {
      get(){
        return this.$store.state.dashboard.searchTypes
      },
      set(val){
        this.$store.commit('setDashboardSearchTypes', val)
      }
    },
    searchText:{
      get(){
        return this.$store.state.dashboard.searchText
      },
      set(val){
        this.$store.commit('setDashboardSearchText', val)
      }
    },
    activeIndex() {
      return this.searchTypes.findIndex((item)=>{
        return item.active
      })
    },
  },
  mounted() {
    //window.addEventListener('scroll',this.checkTop)
    console.log(1)
  },
  beforeDestroy() {
    //window.removeEventListener('scroll',this.checkTop)
  },
  methods: {
    //返回最上
    toTop() {
      this.$emit('toTop')
    },
    //选择类型
    chooseSearchType(index){
      this.searchTypes.forEach((it,i)=>{
        if (i === index) {
          it.active = true
        }
        else {
          it.active = false
        }
      })
      this.typeVisible = false
    },
    //点击搜索
    handleSearch() {
      let obj = this.searchTypes.find((item)=>{
        return item.active
      })
      let type = obj ? obj.text : '综合'
      this.$store.commit('setSearchResultSearchText',this.searchText)
      this.$store.commit('setSearchResultSearchType',type)
      window.$addTab('搜索结果')
    },
  },
};
</script>
<style lang="less">
.headPopper {
  z-index: 233333 !important;
}
</style>
<style scoped lang="less">
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.search-fixed {
  width: calc(100vw - 56px);
  height: 72px;
  backdrop-filter: blur(20px);
  background-color: rgba(246, 247, 250, 0.6);
  border-bottom: 1px solid #e9e9e9;
  position: fixed;
  top: -33px;
  //top: 40px;
  left: 56px;
  z-index: 1600;
  transition: 0.5s;
  &.show {
    top: 40px;
  }
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  .toTopBtn {
    width: 40px;
    height: 40px;
    background-image: url('~@/assets/dashboard/to-top-btn.png');
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #f2f3f6;
    &:hover {
      background-image: url('~@/assets/dashboard/to-top-btn-active.png');
    }
  }
  .search-box {
    position: relative;
    width: calc(100% - 56px);
    height: 40px;
    border-radius: 6px;
    display: flex;
    .left-search {
      width: calc(100% - 88px);
      height: 40px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      box-sizing: border-box;
      border: 1px solid #e1e1e1;
      border-right: none;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 8px 0;
      .options-btn {
        width: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-sizing: border-box;
        border-right: 1px solid #e1e1e1;
        span {
          font-size: 14px;
          color: rgba(0,0,0,0.66);
          margin-right: 10px;
        }
      }
      /deep/ .el-input {
        width: calc(100% - 90px) !important;
        height: 38px;
        > input {
          height: 100%;
          border: none;
        }
      }
    }
    .right-btn {
      width: 88px;
      height: 40px;
    }
    /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
</style>
